<template>
  <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    操作日志
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>BTM上报日志</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type='primary' @click='logDialog=true'>新增日志</el-button> -->
            <el-input v-model="params.btm" clearable placeholder="筛选：机器编号" class="handle-input mr10" style="width:200px;"></el-input>
            <el-input v-model="params.id" clearable placeholder="筛选：日志标识" class="handle-input mr10" style="width:200px;"></el-input>
            <el-date-picker
            class="handle-date"
            @change='showSelect'
            v-model="select_date"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
            </el-date-picker>

            <el-button type="primary" icon="search" class="handle-btn" @click="getList">搜索</el-button>

        </div>

        <el-table :data="systemData" border style="width: 100%" ref="multipleTable">
            <el-table-column  prop="id" label="序号"> 
            </el-table-column>
            
            <el-table-column  prop="btm" label="设备编号"> 
            </el-table-column>

            <el-table-column  prop="content" label="内容" width="400"> 
            </el-table-column>

            <el-table-column label="类型状态">
                <template slot-scope="scope">
                    {{scope.row.type==0?'正常':scope.row.type==1?'停止':scope.row.type==3?'故障':'维护中'}}
                </template> 
            </el-table-column>

            <el-table-column  prop="createTime" label="上报时间"> 
            </el-table-column>

            <el-table-column label="操作"> 
                <template slot-scope="scope">
                    <el-button type='success' size="small" @click='detail(scope.row)'>查看详情</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="pagination">
          <el-pagination
            :page-size="params.size"
            @current-change ="handleCurrentChange"
            layout="prev, pager, next"
            :total="all_page">
          </el-pagination>
        </div>
        <el-dialog :visible.sync="showDetail" title='日志详情'>
            <el-form label-width='110px'>
                <el-form-item label='BTM标识：'>
                    {{detailData.btm}}
                </el-form-item>
                <el-form-item label='标识：'>
                    {{detailData.id}}
                </el-form-item>
                <el-form-item label='上报时间：'>
                    {{detailData.createTime}}
                </el-form-item>
                <el-form-item label='内容：'>
                    {{detailData.content}}
                </el-form-item>
                <el-form-item label='类型：'>
                    {{detailData.type==0?'正常':detailData.type==1?'停止':detailData.type==3?'故障':'维护中'}}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="default" @click="showDetail = false">关闭</el-button>
                <!-- <el-button type="success" @click="addLog">保存</el-button> -->
            </div>
        </el-dialog>
    <el-dialog :visible.sync='logDialog'
    title='新增日志'>
        <el-form>
            <el-form-item label='BTM标识：'>
                <!-- <el-input placeholder="输入数量" v-model='logParams.amount'></el-input> -->
                <el-select placeholder="请选择BTM设备" @focus="getBtm" v-model='logParams.btm'>
                    <el-option v-for='(item,index) of btmList'
                    :key='index'
                    :label='item.name'
                    :value='item.id'>
                    </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label='内容：'>
                <el-input placeholder="请输入内容" type='textarea' v-model='logParams.content'></el-input>
            </el-form-item>
            <!--<el-form-item label='大额取款箱'>
                <el-input placeholder="数量" v-model='logParams.boxData[1].num'></el-input>
            </el-form-item>
            <el-form-item label='存款箱'>
                <el-input placeholder="数量" v-model='logParams.boxData[2].num'></el-input>
            </el-form-item>
            <el-form-item label='备注'>
                <el-input type='textarea' v-model='logParams.remark' placeholder="备注"></el-input>
            </el-form-item> -->
            <el-form-item label='类型'>
                <el-radio-group v-model="logParams.type">
                    <el-radio-button label="正常" value='0' size='small'></el-radio-button>
                    <el-radio-button label="停止" value='1' size='small'></el-radio-button>
                    <el-radio-button label="故障" value='2' size='small'></el-radio-button>
                    <el-radio-button label="维护中" value='3' size='small'></el-radio-button>
                    <!-- <el-radio-button label="3" value='3' size='small'>维修中</el-radio-button> -->
                </el-radio-group>
            </el-form-item>
        </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="default" @click="closeEdit">关闭</el-button>
            <el-button type="success" @click="addLog">保存</el-button>
        </div>
    </el-dialog>
    <loading v-if='loading' :tip='tip'></loading>
  </div>
</template>
<script>
import {api,apiGet,apiPatch} from "@/api/index";
import loading from "@/components/common/loading.vue";
export default {
    data(){
        return {
            showDetail:false,
            loading:false,
            tip:'',
            logParams:{
                btm:'',
                content:'',
                type:0,
            },
            params:{
                page:0,
                size:5,

            },
            detailData:{},
            all_page:1,
            logDialog:false,
            select_date:'',
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_date:[],
            select_machineno:'',
            operateLogCenter:[],
            systemData:[],
            btmList:[],
            params:{
                page:0,
                size:10,
                btm:'',
                startTime:'',
                endTime:'',
                id:'',
            },
        }
    },
    components:{
        loading
    },
    methods:{
        showSelect(){
        // //console.log(this.select_date);
            var pecker=[];
            // //console.log(this.select_date);
            if(this.select_date){
            this.select_date.map(item=>{
                var date = item; //日期对象
                var now = "";
                now = date.getFullYear()+"-"; //读英文就行了
                now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
                now = now + date.getDate()+" ";
                now = now + date.getHours()+":";
                now = now + date.getMinutes()+":";
                now = now + date.getSeconds()+"";
                // //console.log(now)
                pecker.push(now);
            })
            this.params.startTime=pecker[0];
            this.params.endTime=pecker[1];
            }else{
            this.params.startTime='';
            this.params.endTime='';
            }
        },
        handleCurrentChange(val){
            this.params.page=val-1;
            this.getList();
        },
        systemLogs(row){
            this.loading=true;
            this.tip='获取系统日志';
            apiGet.drive.systemLog({}).then(res=>{
                //console.log(res)
                this.systemData=res.content;
                this.loading=false;
                // this.systemShow=true;
            })
        },
        detail(val){
            this.showDetail=true;
            this.detailData=val;
        },
        closeEdit(){
            this.logDialog=false;
            // this.logParams={
            //     amount :'',
            //     boxData :[{
            //         num :'',
            //         type:'小额取款箱'
            //     },
            //     {
            //         num :'',
            //         type:'大额取款箱'
            //     },
            //     {
            //         num :'',
            //         type:'存款箱'
            //     }],
            //     btm :'',
            //     remark :'',
            //     type:'小额取款箱',
            // }
        },
        getList(){
            this.loading=true;
            this.tip='获取系统日志';
            apiGet.drive.systemLog(this.params).then(res=>{
                //console.log(res)
                this.systemData=res.content;
                this.loading=false;
                // console.log(res)
                this.all_page=res.totalElements;
                // this.systemShow=true;
            });
        },
        getBtm(){
            apiGet.drive.getDriveList({}).then(res=>{
                this.btmList=res.content;
            })
        },
        addLog(){
            this.loading=true;
            this.tip='添加日志';
            api.drive.systemLog(this.logParams).then(res=>{
                // console.log(res);
                this.loading=false;
                this.logDialog=false;
                if(res.code==200){
                    this.$message.success('添加成功');
                }
            })
        }
    },
    mounted () {
        this.getList();
    }
}
</script>
<style scoped>
.handle-input{
    margin: 0 5px 10px 0;
}
.handle-select{
    width: 200px;
    margin: 0 5px 10px 0;
}
.handle-date{
    width:400px;
    display:inline-block;
    vertical-align:top;
    margin:0 5px 20px 0;
}
.handle-btn{

    vertical-align:top;
}
</style>
